<template>
	<view class="appraise-content" :style="{direction:i18nLocale=='ug'?'rtl':''}">
		<scroll-view scroll-y="true" style="height:100%;width:100%;">
			<view class="title">{{$t('InteriorView')}}</view>
			<view class="shop-image" dir="ltr">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					indicator-active-color="#15c45b" style="width:100%;height:100%">
					<swiper-item v-for="item in shopdata.banners" style="width:100%;height:100%;border-radius: 30rpx;">
						<view class="swiper-item">
							<image :src="getImgSrc(item)" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="address">
				<text>{{$t('InteriorAddress')}}</text>
				<view class="address-content">
					{{i18nLocale=='ug'?shopdata.ug_address:shopdata.cn_address}}
				</view>
			</view>
			<view class="title">
				<text>{{$t('BusinessHours')}}</text>
				<view class="time">{{shopdata.work_time}}</view>
			</view>
			<view class="map-content">
				<map :latitude="shopdata.location[0]" :longitude="shopdata.location[1]" enable-zoom scale="16"
					show-location style="width: 100%; height:100%;" :markers="address">

				</map>
			</view>
			<view class="title">
				{{$t('ContactMerchant')}}
			</view>
			<Contact :shopdata="shopdata"></Contact>
		</scroll-view>
	</view>
</template>

<script>
	import Contact from "@/components/Contact.vue"
	export default {
		components: {
		Contact
		},
		props:['shopdata'],
		data() {
			return {
				address: [{
					latitude: '39.459801',
					longitude: '76.009871',
					title: '',
					iconPath: require('@/static/images/300.png'),
					width:50,
					height:50,
					label:{
						content:'店铺',
						color:'#fff',
						bgColor:'#15c45b',
						textAlign:'center',
						padding:10,
						borderRadius:10,
						x:-80,
						y:0
					}
				}],
			};
		},
		mounted() {
			this.address[0].latitude=this.shopdata.location[0];
			this.address[0].longitude=this.shopdata.location[1];
			if(this.$i18n.locale=='ug'){
				this.address[0].label.content=this.shopdata.ug_name
			}else{
				this.address[0].label.content=this.shopdata.cn_name
			}
			
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			
		}

	}
</script>

<style lang="scss" scoped>
	.appraise-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: $uni-bg-color-box;
		font-weight: 200;

		.shop-image {
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-top: 20rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

			}

			image {
				width: 100%;
				height: 100%;
				border-radius: $uni-border-radius-lg;
			}
		}

		.title {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx $uni-spacing-padding-sm;
			font-size: $uni-font-size-base;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time {
				color: $uni-text-color-grey;
			}
		}

		.address {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			border-bottom: 2rpx solid $uni-border-color;
			
			text {
				padding: 0rpx 20rpx;
				font-size: $uni-font-size-base;
				white-space: nowrap;
			}

		
		}
		.address-content {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
			// font-size: 30rpx;
			padding:0rpx 0rpx ;
			box-sizing: border-box;
		
		}

		

		.map-content {
			width: 100%;
			height: 30vh;
			position: relative;
		}

		.map-marker {
			width: 44rpx;
			height: 62rpx;
			position: absolute;
			top: 15vh;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>